<template>
  <div class="friendsinfo">
    <van-nav-bar
      :title="friendsinfo"
      class="header-name"
    />
    <van-cell-group>
      <van-field
        v-model="value"
        placeholder="请输入留言内容"
        type="textarea"
        rows="2"
        autosize
        class="my-field"
        @keyup.enter="postcomment"
        ref="fieldRef"
      />
      <van-button
        @click="postcomment"
        type="primary"
        block
        class="post-comments"
      >发表留言</van-button>
    </van-cell-group>
    <div v-if="message.length>0">
      <van-card
        v-for="msg in message"
        :key="msg"
        class="comments-list"
        :desc="msg"
      ><template #thumb>
          <div class="usertou">
            <van-icon
              name="smile-o"
              class="user-icon"
            />
            <div class="user-name">{{username}}</div>
          </div>
        </template>
      </van-card>
    </div>
    <div v-else>
      <van-card
        class="comments-list"
        desc="请输入留言"
      ><template #thumb>
          <div class="usertou">
            <van-icon
              name="smile-o"
              class="user-icon"
            />
            <div class="user-name">
              {{username}}
            </div>
          </div>
        </template>
      </van-card>
    </div>

  </div>
</template>
<script>
import { getFriendsInfo } from '@/api/friends.js'
export default {
  props: ['id'],
  data() {
    return {
      num: 1,
      friendsinfo: '',
      value: '',
      user: {},
      username: '',
      message: []
    }
  },
  created() {
    this.getFriendsInfo()
    this.messagename = JSON.parse(localStorage.user || '[]')
    this.username = this.messagename.username
  },
  methods: {
    async getFriendsInfo() {
      const res = await getFriendsInfo(this.$store.state.home.friendsname, this.num, this.id)
      this.friendsinfo = res.data.name
    },
    postcomment() {
      if (this.value === '') return
      this.message.push(this.value)
      this.value = ''
      this.$refs.fieldRef.focus()
    }
  }
}
</script>
<style lang="scss" scoped>
.friendsinfo {
  .header-name {
    color: pink;
    font-size: 30px;
  }
  .my-field {
    border: 1px solid #eee;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 100px;
  }
  .comments-list {
    border: 1px solid #eee;
    .usertou {
      width: 50px;
      .user-icon {
        font-size: 40px;
        color: pink;
      }
      .user-name {
        font-size: 16px;
        font-weight: 600;
        color: aquamarine;
      }
    }
  }
  .van-card__content {
    min-height: 50px;
  }
  .van-card__thumb {
    width: 50px;
    height: 50px;
  }
}
</style>